<template>
  <section class="eject" v-show="isOpenSpecification">
    <div class="norms">
      <p class="header">
        <span>{{ specificationsData.name }}</span>
        <span class="cross" @click="handleCloseSpecification">+</span>
      </p>
      <p class="name" v-if="specificationsData.specifications">
        {{ specificationsData.specifications[0].name }}
      </p>
      <p class="tag" v-if="specificationsData.specifications">
        <span
          v-for="(item, index) in specificationsData.specifications[0].values"
          :key="index"
          @click="handleTagBtn(index)"
          :class="{ active: currentIndex === index }"
        >
          {{ item }}
        </span>
      </p>
      <p class="footer" v-if="specificationsData.specfoods">
        <span class="price">¥{{ specificationsData.specfoods[0].price }}</span
        ><span class="cart" @click="handleAddCartGoods">加入购物车</span>
      </p>
    </div>

    <div class="mask" @click="handleCloseSpecification"></div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
    };
  },
  props: {
    isOpenSpecification: {
      type: Boolean,
      default: false,
    },

    specificationsData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    handleCloseSpecification() {
      this.$emit("handleCloseSpecification", false);
    },
    handleTagBtn(index) {
      this.currentIndex = index;
    },
    handleAddCartGoods() {
      this.$bus.$emit(
        "handleAddCartGoods",
        this.specificationsData,
        this.currentIndex
      );
      this.$emit("handleCloseSpecification", false);


      const value = this.specificationsData;
      const index = this.currentIndex;
      let payload = {
        restaurant_id: value.restaurant_id,
        category_id: value.category_id,
        item_id: value.item_id,
        food_id: value.specfoods[index].food_id,
        id: value.specfoods[index].food_id,
        specs_name: value.specfoods[index].specs_name,
        packing_fee: value.specfoods[index].packing_fee,
        name: value.specfoods[index].name,
        price: value.specfoods[index].price
      };
      this.$store.dispatch("buyCart", payload);
    },
  },
};
</script>
<style lang="less" scoped>
.eject {
  .norms {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    border-radius: 10px;
    background-color: #ffffff;
    font-size: 15px;

    overflow: hidden;
    z-index: 1;
    .header {
      margin: 20px 10px;
      text-align: center;
      font-size: 17px;
      color: #222222;
      .cross {
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 38px;
        color: #a6a6a6;
        transform: rotate(45deg);
      }
    }
    .name {
      margin: 10px;
    }
    .tag {
      padding: 10px;
      margin-bottom: 30px;
      span {
        padding: 8px 10px;
        border-radius: 5px;
        border: 1px solid #e5e5e5;
      }
      & span:nth-child(1) {
        margin-right: 10px;
      }
      .active {
        border-color: #64b3ee;
        color: #64b3ee;
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      padding: 20px 10px;
      background-color: #f9f9f9;
      .price {
        font-weight: 900;
        font-size: 20px;
        color: #fe7c2e;
      }
      .cart {
        padding: 5px 10px;
        border-radius: 5px;
        background-color: #3199e8;
        color: #ffffff;
      }
    }
  }
  .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #666666;
    opacity: 0.8;
  }
}
</style>
